iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
2
Modern Web

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列 第 23

23. Nuxt 細說`<nuxt-child>` 和 `<nuxt>`

  • 分享至 

  • xImage
  •  

這篇打算為 Nuxt 內建元件收尾,介紹最後兩種

  • <nuxt-child>
  • <nuxt>

回顧上一章,巢狀路由讓 slug 路由下多了 children ,以定義子路由與對應的子頁面元件

/:slug 其下頁面得以用 _slug.vue 父層元件包裹共用邏輯 (包含 template, state 等)

{
  path: '/:slug',
  component: 'pages/_slug.vue',
  children: [
    {
      name: 'slug',
      path: '',
      component: 'pages/_slug/index.vue',
    },

    {
      name: 'slug-comments',
      path: 'comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
},

藉由父層元件的 <nuxt-child> 預留子頁面元件掛載點

<template>
  <div>
    <short-cut-bar></short-cut-bar>
    <nuxt-child> <!-- 若是 /:slug/comment,這邊就是 <comment /> -->
  </div>
</template>

<nuxt-child> 到底做了什麼?

Nuxt 路由拿 vue-router 套件修改而成,<nuxt-link> 包裝 <router-link> 做轉導,<nuxt-child> 則包裝 <router-view> 做 「子頁面掛載點」。

路由交由 Nuxt 自動映射後,與 vue-router 差異在:

  1. 對外 props 簡化到剩 keepAlive,只讓你決定要不要換頁保留物件
    文件同 Vue.js keep-alive
  2. <transition> 改由 Nuxt Transition 處理,接口透過 nuxt.config.js / page component 設定
  3. <transition> 對應的 hook 亦同
    文件同 Vue.js transition
  4. 幫你註冊 triggerScroll 事件,代為控制 Router ScrollBehavior

雖然犧牲各頁面操作的彈性,但也簡化操作邏輯,限制網站設計過度發散
好壞由你評斷 (我認為同 AMP,限制雖多但整體行為、作法會變單純)


<nuxt> - 頁面元件 Wrapper

回顧 layouts/front.vue,同樣有預留「掛載點」的功能
用在 layout 內預留「頁面元件 (Page Component) 掛載點」

<template>
  <div>
    <div>My nav bar</div>
    <nuxt/>
    <div>My footer</div>
  </div>
</template>

說穿了,是個頁面元件的外層包裹,藉此元件載入

  • 錯誤頁面 (Error Page) 對應元件

  • 隱含並透過 <nuxt-child> 載入當前路徑的頁面元件


到此內建元件就介紹完囉!


上一篇
22. Nuxt Routing 進階 - 巢狀路由/嵌套路由 (Nested Routes)
下一篇
24. Nuxt Plugin 如何讓 Axios 更好用 (上)
系列文
Nuxt - 使用 Vue.js 做 SSR 的第一哩路32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言